<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { timeAbbreviation } from '@/utils/time'
import { useCounterStore } from '@/stores/counter'

import type { UserFollow, UserBrowseData } from '@/TypingMore/UserTyping'
const router = useRouter()

const my = ref()

const choiceValue = ref('视频')

const store = useCounterStore()

const { browseRecords, follow } = store

const collectionData = ref<UserBrowseData[]>([])

const likeData = ref<UserBrowseData[]>([])

const followUsersData = ref<UserFollow[]>([])

const browseMyData = ref<UserBrowseData[]>([])

const choiceObj = ref(['视频','点赞','历史记录','我的收藏'])

const show = ref(false)

const showPopup = () => {
    show.value = true
}

const stat = ref({
    "mid": 341160154,
    "following": 10,
    "whisper": 0,
    "black": 0,
    "follower": 0
})
// 跳转用户页
const goToUser = (uid: string) => {
    router.push(`/user/${uid}`)
}
// 跳转视频详情
const goToVideo = (bvid: string, obj: any) => {
    browseRecords(obj)
    router.push(`/video/${bvid}`)
}
// 取消收藏
const cancelCollection = (bvid: string) => {
    collectionData.value = collectionData.value.filter(item => {
        return item.bvid !== bvid
    })
    localStorage.setItem('collection', JSON.stringify(collectionData.value))
}
// 取消点赞
const cancelLike = (bvid: string) => {
    likeData.value = likeData.value.filter(item => {
        return item.bvid !== bvid
    })
    localStorage.setItem('like', JSON.stringify(likeData.value))
}
// 删除历史记录
const cancelHistory = (bvid: string) => {
    browseMyData.value = browseMyData.value.filter(item => {
        return item.bvid !== bvid
    })
    localStorage.setItem('browseData', JSON.stringify(browseMyData.value))
}
// 清空历史记录
const clearHistory = () => {
   localStorage.removeItem('browseData')
}

onMounted(() => {
    if (localStorage.getItem('myData')) {
        let arr = localStorage.getItem('myData') as string
        my.value = JSON.parse(arr)
        console.log('*** my ***', my.value)
    }
    if (localStorage.getItem('followUsers')) {
        let arr1 = localStorage.getItem('followUsers') as string
        followUsersData.value = JSON.parse(arr1)
        console.log('*** followUsersData ***', followUsersData.value)
    }

    if (localStorage.getItem('browseData')) {
        let arr2 = localStorage.getItem('browseData') as string
        browseMyData.value = JSON.parse(arr2)
        console.log('*** browseMyData ***', browseMyData.value)
    }

    if (localStorage.getItem('collection')) {
        let arr3 = localStorage.getItem('collection') as string
        collectionData.value = JSON.parse(arr3)
        console.log('*** collection ***', collectionData.value)
    }

    if (localStorage.getItem('like')) {
        let arr4 = localStorage.getItem('like') as string
        likeData.value = JSON.parse(arr4)
        console.log('*** like ***', likeData.value)
    }
})
</script>

<template>
    <div>
        <div>
            <img src="@/assets/bannerTop_new.png" alt="">
        </div>
        <div class=" flex justify-between px-3">
            <div class=" relative inline-block  w-20 h-20 -top-3">
                <img :src="my?.face" alt="" class="w-full h-full rounded-full" />
                <img src="@/assets/icon_Certification_official.png" class=" absolute bottom-0 right-0 w-5 h-5" alt="">
            </div>
            <div class="flex-1 ml-10">
                <div class="flex justify-between pt-2 text-center text-sm">
                    <div>
                        <p>{{ timeAbbreviation(stat?.follower) ? timeAbbreviation(stat?.follower) : '--' }}</p>
                        <p class=" text-xs">粉丝</p>
                    </div>
                    <div @click="showPopup">
                        <p>{{ timeAbbreviation(followUsersData?.length) ? timeAbbreviation(followUsersData?.length) :
                                '--'
                        }}</p>
                        <p class=" text-xs">关注</p>
                    </div>
                    <div>
                        <p>{{ timeAbbreviation(stat?.whisper) ? timeAbbreviation(stat?.whisper) : '--' }}</p>
                        <p class=" text-xs">获赞</p>
                    </div>
                </div>
                <div class=" py-1 rounded-md mt-3 text-center text-white" style="background-color: #fb7299;" @click="">
                    {{ '编辑资料' }}
                </div>
            </div>
        </div>
        <div class=" p-3">
            <p><span class="text-lg">{{ my?.name }}</span><span>{{ my?.sex }}</span><span style="font-size: 13px ;"
                    class=" m-2  font-black text-white"><i class=" text-xs font-bold bg-red-500">lv</i><i
                        class=" font-bold bg-red-500">{{
                                my?.level
                        }}</i></span><span style="background-color: #fb7299;"
                    class=" m-2 text-xs text-white rounded-sm">{{ my?.vip.label.text }}</span></p>
            <p class=" flex items-center text-size13"><img src="@/assets/icon_Certification_official.png" alt=""
                    class=" w-4 h-4">{{ my?.official.title === '' ? '这个人很懒，什么也没留下' : my?.official.title }}</p>
            <p class="text-size13 text-gray-400">{{ my?.sign }}</p>
            <p class=" text-xs"><span class=" text-slate-900 bg-gray-100">{{ my?.nameplate.level }}</span><span
                    class="bg-gray-100 ml-2">{{ 'uid:' + my?.mid }}</span></p>
        </div>
        <div class=" flex justify-between px-3 py-1 border-y">
            <span :class="{'active-my': choiceValue === c}" v-for="c in choiceObj" @click="choiceValue = c">{{ c }}</span>
            <!-- <span @click="choiceValue = '视频'">视频</span><span @click="choiceValue = '点赞'">点赞</span><span
                @click="choiceValue = '历史记录'">历史记录</span><span @click="choiceValue = '我的收藏'">我的收藏</span> -->
        </div>
        <div v-show="choiceValue === '点赞'">
            <div class=" flex relative py-2 px-3 border-b " v-for="v in likeData" :key="v.aid"
                @click="goToVideo(v.bvid, v)">
                <div class=" relative w-28">
                    <img :src="v.pic + '@468w_292h_1c.webp'" alt="" class=" w-full h-full">
                    <div class=" absolute bottom-0 right-0 text-xs text-white" style="background: rgba(0,0,0,.5); ">{{
                            v.length
                    }}</div>
                </div>
                <div class=" flex-1 flex flex-col justify-between overflow-hidden ml-3">
                    <div class=" whitespace-nowrap text-ellipsis overflow-hidden">{{ v.title }}</div>
                    <div class=" flex justify-between"><p><span>{{ timeAbbreviation(v.play) }}</span><span>{{ timeAbbreviation(v.video_review) }}</span></p>
                        <p @click.stop="cancelLike(v.bvid)">取消收藏</p>
                    </div>
                </div>
            </div>
        </div>

        <div v-show="choiceValue === '历史记录'">
            <div class=" flex relative py-2 px-3 border-b " v-for="v in browseMyData" :key="v.aid"
                @click="goToVideo(v.bvid, v)">
                <div class=" relative w-28">
                    <img :src="v.pic + '@468w_292h_1c.webp'" alt="" class=" w-full h-full">
                    <div class=" absolute bottom-0 right-0 text-xs text-white" style="background: rgba(0,0,0,.5); ">{{
                            v.length
                    }}</div>
                </div>
                <div class=" flex-1 flex flex-col justify-between overflow-hidden ml-3">
                    <div class=" whitespace-nowrap text-ellipsis overflow-hidden">{{ v.title }}</div>
                    <div class=" flex justify-between"><p><span>{{ timeAbbreviation(v.play) }}</span><span>{{ timeAbbreviation(v.video_review) }}</span></p>
                        <p @click.stop="cancelHistory(v.bvid)">x</p>
                    </div>
                </div>
               
            </div>
            <div class=" my-3 text-center text-gray-300" @click="clearHistory">清空历史记录</div>
        </div>

        <div v-show="choiceValue === '我的收藏'">
            <div class=" flex relative py-2 px-3 border-b " v-for="v in collectionData" :key="v.aid"
                @click="goToVideo(v.bvid, v)">
                <div class=" relative w-28">
                    <img :src="v.pic + '@468w_292h_1c.webp'" alt="" class=" w-full h-full">
                    <div class=" absolute bottom-0 right-0 text-xs text-white" style="background: rgba(0,0,0,.5); ">{{
                            v.length
                    }}</div>
                </div>
                <div class=" flex-1 flex flex-col justify-between overflow-hidden ml-3">
                    <div class=" whitespace-nowrap text-ellipsis overflow-hidden">{{ v.title }}</div>
                    <div class=" flex justify-between"><p><span>{{ timeAbbreviation(v.play) }}</span><span>{{ timeAbbreviation(v.video_review) }}</span></p>
                        <p @click.stop="cancelCollection(v.bvid)">取消收藏</p>
                    </div>
                </div>
            </div>
        </div>

        <div v-show="choiceValue === '视频'">
           <div class=" text-center text-gray-400">
            <img src="@/assets/noContent.png" class=" w-72 mb-4 mx-auto" alt="">
            <p>Ta还没有投过稿~</p>
            <p>快去发现新内容吧！</p>
           </div>
        </div>

        <van-popup v-model:show="show" position="right">
            <div style="width: 100vw; height: 100vh;" class=" pt-11 bg-white">
                <div
                    class=" flex fixed justify-between items-center h-11 px-3 text-white top-0 left-0 right-0 bg-white z-40">
                    <div @click="show = false"><van-icon name="arrow-left" color="#fb7299" /></div>
                    <p style="color: #fb7299;">关注</p>
                    <p style="color: transparent;">!</p>
                </div>
                <div>
                    <div class=" flex p-3 bg-white" v-for="f in followUsersData" :key="f.mid" @click="goToUser(f.mid)">
                        <div class=" relative w-16 h-16 rounded-full">
                            <img :src="f.face + '@120w_120h_1c.webp'" alt="" class=" max-w-none w-full rounded-full">
                            <img src="@/assets/icon_Certification_official.png" alt=""
                                class=" absolute bottom-0 right-0  w-4 h-4">
                        </div>
                        <div class=" flex-1 ml-3 overflow-hidden">
                            <h2 class=" text-sm whitespace-normal">{{ f.name }}</h2>
                            <p class=" text-xs text-gray-400 overflow-hidden whitespace-nowrap  text-ellipsis">
                                {{ f.sign }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<style>
.active-my {
    color: #fb7299;
}
</style>